<template>
	<view style="overflow: hidden" class="u-skeleton">
		<u-navbar title="商品详情" title-color="#333333" back-icon-color="#333333" :border-bottom="false">
		</u-navbar>
		<view class="ml30 mr30" style="margin-top: 40rpx" v-if="loading">
			<view class="u-skeleton-fillet h-skeleton mb20" style="height: 620rpx">
			</view>
			<view class="u-skeleton-fillet h-skeleton"> </view>
			<view class="u-skeleton-fillet h-skeleton mt20"></view>
			<view class="u-skeleton-fillet mt20" style="height: 200rpx"></view>
		</view>
		<view class="pr">
			<swiper @change="changeBanner" v-if="!loading" style="height: 620rpx" mode="number" :indicator-dots="true"
				:interval="5000" :duration="600" class="swiperImg">
				<swiper-item v-if="detailVideo" item-id="video" style="
            background-color: #000000;
            display: flex;
            align-items: center;
            position: relative;
          ">
					<view class="pr">
						<video :src="detailVideo" v-if="loadVideo && currentVideo == 'banner'" :autoplay="autoplay"
							:loop="true" :show-center-play-btn="true" object-fit="fill" :poster="false"
							style="width: 750rpx"></video>
						<view v-else>
							<image style="width: 750rpx; height: 620rpx" :src="
                  detailVideo + '?x-oss-process=video/snapshot,t_1500,f_jpg'
                " mode="aspectFill">
							</image>
							<view class="block" @click="handleImg">
								<view class="sanjia"></view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item v-for="(item, index) in list" :key="index" :item-id="index.toString()">
					<image :src="item" style="width: 750rpx; height: 620rpx" mode="aspectFill">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<goodsPrice  :source="source" :currentSpecName="currentSpecName" class="" @handleShare="showShare = true" :info="goodsInfo">
		</goodsPrice>
		<view class="pl30 pr30" v-if="goodsInfo.orderLimitTime">
			<view class="mt20 bgcf bdr20 p20 df aic jcsb">
				<view class="c6 fs26">
					截单时间			
				</view>
				<view class="c3 fw5 fs26" style="width: 400rpx;height: 75rpx;">
					<!-- goodsInfo.arriveLimitTime==0?'当日':goodsInfo.arriveLimitTime==1?'次日':`第${goodsInfo.arriveLimitTime}天` -->
					{{goodsInfo.orderLimitTime}}前完成订单 (当天发货)预计配送到达时间(预计次日16:00前到货)
				</view>
			</view>
		</view>

		<view class="box p20 df aic jcsb">
			<view class="c6 label-other">配送信息</view>
			<view class="c3 fs24 fwb u-text-right u-line-1" style="width: 500rpx">送至：<text class="app-theme"
					v-if="TOKEN" @click="handleAddress">{{
          LOCATION.name || "未选择地址"
        }}</text><text class="app-theme" v-if="!TOKEN" @click="handleLogin">未登录</text>
				<nmr-icon name="xiangyou1" color="#666666" size="24"></nmr-icon>
			</view>
		</view>
		<view class="box p20 df aic jcsb" v-if="goodsInfo.afterSaleLabel">
			<view class="c6 label-other">售后</view>
			<view class="c3 fs24 fw5">{{goodsInfo.afterSaleLabel}}</view>
		</view>
		<commitment v-if="goodsInfo.openPromise == 1" :info="goodsInfo"></commitment>
		<SkuInfo  @handleLogin="handleLogin()" :source="source" :info="goodsInfo" @valChange="valChange"
			:platformGoodsSpecMix="goodsInfo.platformGoodsSpecMix"></SkuInfo>
		<!-- 商品信息 -->
		<goodsInfo  :info="goodsInfo"></goodsInfo>
		<view class="m30 bgcf bdr20" style="margin-top: 0; overflow: hidden">
			<view class="pr detail" v-if="detailVideo">
				<video :src="detailVideo" v-if="loadVideoDetail && currentVideo === 'videoDetail'" :autoplay="true"
					:loop="true" :show-center-play-btn="true" object-fit="fill" :poster="false"
					style="width: 690rpx; height: 690rpx"></video>
				<view v-else>
					<image style="width: 690rpx; height: 570rpx" :disabled="false" :controls="false" :autoplay="false"
						:src="detailVideo + '?x-oss-process=video/snapshot,t_1500,f_jpg'" mode="aspectFill"></image>
					<view class="block" @click="handleImgDetail">
						<view class="sanjia"></view>
					</view>
				</view>
			</view>
			<view class="" v-for="item in goodsImg">
				<view v-if="item.type == 1">
					<u-image class="detail-img" width="100%" mode="widthFix" :src="item.content" />
				</view>
				<view :class="{ mt10: item.sort != 1 }" v-if="item.type == 2">
					<view class="df fdr aic fww jcfs w100 p10">
						<u-image width="215rpx" mode="widthFix"
							v-for="(itm, inx) in item.content && item.content.split(',')" border-radius="4" :key="inx"
							:src="itm" class="small-img" @click="
                previewImage(item.content && item.content.split(','), inx)
              " />
					</view>
				</view>
				<view class="df fdr aic fww jcsa" v-if="item.type == 3" :class="{ mt20: item.sort != 1 }">
					<video class="w100" :muted="true" :autoplay="false" :id="'video' + item.sort" :show-mute-btn="true"
						:src="item.content"></video>
				</view>
				<view v-if="item.type == 4" :class="{ mt20: item.sort != 1 }" style="white-space: pre-wrap"
					class="c6 p10 desc-text-box">
					{{ item.content }}
				</view>
				<view v-if="item.type == 6" :class="{ mt20: item.sort != 1 }" class="c6">
					<view v-for="(itm, inx) in info.promiseList" :key="inx" style="white-space: pre-wrap" class="c6">
						<view class="">{{ itm.title }}</view>
						<view class="">{{ itm.content }}</view>
					</view>
				</view>
			</view>
			<!-- <u-image src="@/static/goods/detail-info.png" mode="widthFix"></u-image> -->
		</view>
		<!-- 选购指南 -->
		<priceDesc v-if="goodsInfo.subjectDescName" :subjectDescName="goodsInfo.subjectDescName"
			:subjectDesc="goodsInfo.subjectDesc"></priceDesc>
		<xgzn></xgzn>
		<jgsm></jgsm>
		<!-- <image src="../../static/goods/like-label.png" class="label-like"></image>
			<view class="goodsList">
				<goodsList :flowList="recordgoodList" ></goodsList>
			</view> -->
		<Share @handleSave="handleSave" :posterImg="posterImg" @createPoster="createPoster" :goodsInfo="goodsInfo"
			v-model="showShare"></Share>
		<view class="mdbJr" style="height: 160rpx"></view>
		<u-back-top :icon-style="{ color: '#333333' }" icon="arrow-up" tips="顶部" :custom-style="{
        width: '80rpx',
        height: '80rpx',
        color: '#333333',
        background: '#FFFFFF',
        boxShadow: '0rpx 0rpx 20rpx 1rpx rgba(163,163,163,0.49)',
      }" :scroll-top="scrollTop" bottom="300"></u-back-top>
		<canvas :style="{ width: winWidth + 'px', height: winHeight + 'px' }" canvas-id="posterId" id="posterId"
			class="tui-poster__canvas"></canvas>
		<sc-qrcode class="sc-code" :val="val" cid="qrcode1" ref="qrcode" />
		<ShopCart :option="option" @add="addShowSku" @handlesubmit="handlesubmit" @changeCollect="changeCollect" :carList="goodsCarList"
			:source="source" :bMemberCollectFlag="goodsInfo.bmemberCollectFlag"
			:stock="stockTheme" :end="goodsInfo.end" :info="goodsInfo"></ShopCart>
		<LoginPopup @loginSuccess="loginSuccess" ref="LoginPopup"></LoginPopup>
		<SkuPopup @changeCarList="changeCarList" :goodsCarList="goodsCarList" @change="(e) => (goodsInfo = e)"
			v-model="showSku" :info="goodsInfo"></SkuPopup>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<ModalMsg v-model="showAddress" confirmName="请选择收货地址" @confirm="chooseAddress" :showCancel="false">
			<view class="address-desc mt30 fs26 c3 u-text-center">
				以下地址为附近定位，请选择您的收货地址
				<view class="localtion df aic jcc app-theme fs22 mt30 u-text-center">
					<nmr-icon name="dingwei-3" size="22" color="#48A147"></nmr-icon>
					{{ LOCATION.name || "" }}
				</view>
			</view>
		</ModalMsg>
	</view>
</template>

<script>
	// const poster = require('@/utils/poster.js');
	import xgzn from "./components/xgzn.vue";
	import jgsm from "./components/jgsm.vue";
	import priceDesc from "./components/priceDesc.vue";
	import commitment from "./components/commitment.vue";
	import goodsInfo from "./components/goodsInfo";
	import goodsPrice from "./components/goodsPrice";
	import Share from "./components/Share";
	import SkuInfo from "./components/SkuInfo";
	import ShopCart from "./components/ShopCart";
	import {
		platformGoodInfo
	} from "@/api/goods.js";
	import ModalMsg from '@/components/ModalMsg.vue'
	// import {
	// 	shopGoodsInfo,
	// 	urlScheme
	// } from '@/api/common.js'
	import {
		bGoodsCollectAdd,
		bGoodsCollectDelect
	} from "@/api/collect.js";
	let shareImg, shareTitle;

	export default {
		components: {
			xgzn,
			priceDesc,
			goodsInfo,
			goodsPrice,
			Share,
			SkuInfo,
			ShopCart,
			jgsm,
			commitment,
			ModalMsg
		},
		data() {
			return {
				stockTheme:'',
				showSku: false,
				loading: true,
				autoplay: false,
				scrollTop: 0,
				list: [],
				goodsImg: [],
				goodsId: "",
				goodsInfo: {
					platformGoodsSpecMix: {},
					groupActivity: {},
					bMemberCollectFlag: 1,
					images:''
				},
				goodsCarList: [],
				showShare: false,
				posterImg: "",
				isCreated: false,
				val: "",
				info: {},
				winWidth: uni.upx2px(630 * 2),
				winHeight: uni.upx2px(775 * 2),
				detailVideo: undefined,
				currenIndex: "0",
				loadVideo: false,
				loadVideoDetail: false,
				currentVideo: "banner",
				saleType: "",
				platformGoodsSpecMixId: "",
				option: {},
				currentSpecName: "",
				source: "",
				showAddress: false,
				platformGoodsSpecMixId: '',
				stcok: '',
				busType:'',
			};
		},

		onShow() {
			let that = this
			uni.$on('isRefresh', function(data) {
				console.log('监听到事件来自返回的参数：' + data);
				// TODO 下面执行刷新的方法
				that.stockTheme = data
				// that.getInfo();
			})
		},
		onShareAppMessage(res) {
			return {
				title: shareTitle,
				path: `/pages/goods/detail?id=${this.goodsId}`,
				imageUrl: shareImg,
			};
		},

		onShareTimeline() {
			return {
				title: shareTitle,
				path: `/pages/goods/detail?id=${this.goodsId}`,
				imageUrl: shareImg,
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(option) {
			this.source = option.source ? option.source : "";
			this.goodsCarList = uni.getStorageSync("CARGOODLIST")||[];
			this.loading = true;
			this.option = option;
			this.checkOnload(this.option);
		},
		methods: {
			addShowSku() {
				if (!this.TOKEN) {
					this.handleLogin();
					return;
				}
				this.showSku = true;
			},
			chooseAddress() {
				uni.navigateTo({
					url: `/pages/my/address/address?source=theme&isShopCart=true&goodsList=${this.calcGoodsList}&addressId=${this.LOCATION.addressId}&stcok=${this.stcok}`,
				});
			},
			// 去结算 需要判断 是否满足金额  其次是否是送货地址
			handlesubmit(e) {
				if (!this.TOKEN) {
					this.handleLogin();
					return;
				}
				console.log('。。。。。', this.goodsInfo.platformGoodsSpecMix.purNum);
				let goodsList = []
				// this.menuGoods.forEach((e => {
				// 	e.bgoodsList.forEach(item => {
				// 		if (item.platformGoodsSpecMix[0].purNum) {
				// 			item.platformGoodsSpecMix[0].checkFlag = true
				// 			goodsList.push(item.platformGoodsSpecMix[0])
				// 		}
				// 	})
				// }))
				// this.goodsInfo.platformGoodsSpecMix.purNum = !this.goodsInfo.platformGoodsSpecMix.purNum?1:this.goodsInfo.platformGoodsSpecMix.purNum
				goodsList.push(...this.goodsInfo.platformGoodsSpecMix)
				this.calcGoodsList = encodeURIComponent(JSON.stringify(goodsList))
				console.log(goodsList, this.calcGoodsList, this.LOCATION.addressId);
				if (!this.LOCATION.addressId) {
					this.showAddress = true;
					this.stcok = e
				} else {
					uni.navigateTo({
						url: `/pages/confirm/index?flag=theme&goodsList=${this.calcGoodsList}&addressId=${this.LOCATION.addressId}&stcok=${e}`,
					});
				}
			},
			changeCollect() {
				if (!this.TOKEN) {
					this.handleLogin();
					return;
				}
				if (this.goodsInfo.bmemberCollectFlag == 1) {
					bGoodsCollectAdd({
						platformGoodsId: this.goodsInfo.platformGoodsId,
					}).then((res) => {
						if (res.code == 200) {
							this.goodsInfo.bmemberCollectFlag = 0;
							this.goodsInfo.bgoodsCollectId = res.data.goodsCollectId;
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
							});
						}
					});
				} else {
					bGoodsCollectDelect(this.goodsInfo.bgoodsCollectId).then((res) => {
						if (res.code == 200) {
							this.goodsInfo.bmemberCollectFlag = 1;
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
							});
						}
					});
				}
			},
			handleLogin() {
				this.$refs.LoginPopup.checkLogin();
			},
			skuChange(e) {
				this.currentSpecName = this.goodsInfo.groupGoodsMixList[e].specName;
				console.log(this.currentSpecName);
			},
			changeCarList(e) {
				this.goodsCarList = e;
				uni.setStorageSync("CARGOODLIST", e);
				let num = this.$common.clacCount(e);
				if (num == 0) {
					uni.removeTabBarBadge({
						index: 3,
					});
				} else {
					uni.setTabBarBadge({
						index: 3,
						text: num,
					});
				}
			},

			checkOnload(option) {
				this.val = "https://pay.zhaimei365.com";
				if (option.id) {
					this.goodsId = option.id;
				} else {
					let url = decodeURIComponent(option.q);
					this.goodsId = this.$common.getQueryVariable(url, "id");
				}
				this.val = this.val + "?id=" + this.goodsId;
				this.platformGoodsSpecMixId = option.platformGoodsSpecMixId ? option.platformGoodsSpecMixId : ''
				this.busType = option.busType||''
				this.getInfo();
			},
			valChange(e, index) {
				this.goodsInfo.platformGoodsSpecMix[index].purNum = e
				if (this.source == 'theme') {

				} else {
					this.handleCart(this.goodsInfo.platformGoodsSpecMix[index])
				}
			},

			handleCart(e) {
				let goodsCarList = this.goodsCarList || [];
				let index = goodsCarList.findIndex(
					(i) => i.platformGoodsSpecMixId == e.platformGoodsSpecMixId
				);
				if (index == -1) {
					//购物车中没有这个商品  新增操作
					goodsCarList.unshift(e);
				} else {
					//购物车中有这个商品  修改操作
					if (e.purNum == 0) {
						//删除操作
						goodsCarList.splice(index, 1);
					} else {
						//只有購物車的時候 才手動更新列表
						goodsCarList[index].purNum = e.purNum;
						goodsCarList[index].busType = e.busType||''
						goodsCarList[index].platformPrice = e.platformPrice;
					}
				}
				this.goodsCarList = goodsCarList;
				uni.setStorageSync("CARGOODLIST", this.goodsCarList);
				let num = this.$common.clacCount(this.goodsCarList);
				if (num == 0) {
					uni.removeTabBarBadge({
						index: 3,
					});
				} else {
					uni.setTabBarBadge({
						index: 3,
						text: num,
					});
				}
			},
			handleImg() {
				this.currentVideo = "banner";
				this.loadVideo = true;
				this.autoplay = true;
			},
			handleImgDetail() {
				this.currentVideo = "videoDetail";
				this.loadVideoDetail = true;
			},
			changeBanner(e) {
				this.loadVideo = false;
				this.$nextTick(() => {
					this.autoplay = false;
				});
				this.currenIndex = e.detail.currentItemId;
			},
			handleSave() {
				poster.saveImage(this.posterImg);
			},
			handleAddress() {
				if (this.TOKEN) {
					uni.navigateTo({
						url: "/pages/addressLocation",
					});
				} else {
					this.$refs.LoginPopup.checkLogin();
				}
			},
			wxQrcode() {
				return new Promise((resolve) => {
					const that = this;
					this.$refs.qrcode._makeCode().then((res) => {
						uni.hideLoading();
						this.info.img = this.$common.replaceDomain(
							shareImg,
							"h5.zhaimei365.com"
						);
						this.info.wxQrcodeUrl = res;
						this.info.name = shareTitle || "宅美商品";
						this.info.price =
							this.saleType == 3 ?
							this.goodsInfo.groupActivity.groupPriceRange :
							this.goodsInfo.platformGoodsSpecMix.shopPrice;
						this.info.specName =
							this.saleType == 3 ?
							this.goodsInfo.groupGoodsMixList[0].specName :
							this.goodsInfo.specName || "";
						uni.showLoading({
							mask: false,
							title: "海报生成中",
						});
						resolve(true);
					});
					// urlScheme({
					// 	url: '/pages/goods/detail',
					// 	query: 'id='+this.goodsId
					// }).then(res => {
					// 	if (res.code === 200) {
					// 		let data = res.data
					// 		const fsm = wx.getFileSystemManager()
					// 		const filePath = wx.env.USER_DATA_PATH + '/qrcode.jpg'
					// 		fsm.unlink({
					// 			filePath: filePath,
					// 			success(succ) {
					// 			},
					// 			file(fl) {
					// 			}
					// 		})
					// 		data = data.substring(data.indexOf(',') + 1)
					// 		const buffer = wx.base64ToArrayBuffer(data)
					// 		fsm.writeFile({
					// 			filePath,
					// 			data: buffer,
					// 			encoding: 'binary',
					// 			success(succ) {
					// 				that.wxQrcodeUrl = filePath
					// 				that.info.img = shareImg
					// 				that.info.wxQrcodeUrl = filePath;
					// 				that.info.name = (that.goodsInfo.customGoodsName || '宅美商品');
					// 				that.info.price = that.goodsInfo.platformGoodsSpecMix.shopPrice;
					// 				that.info.specName = that.goodsInfo.specName || '';
					// 				uni.showLoading({
					// 					mask: false,
					// 					title: '海报生成中'
					// 				});
					// 				resolve(true);
					// 			},
					// 			file(fl) {
					// 				uni.hideLoading()
					// 			}
					// 		})
					// 	} else {
					// 		uni.hideLoading()
					// 	}
					// })
				});
			},

			async createPoster() {
				if (this.isCreated) {
					return;
				}
				this.isCreated = true;
				if (this.posterImg) {
					this.isCreated = false;
					return;
				}
				const code = await this.wxQrcode();
				const title = "";
				const desc = "";
				// #ifdef MP-WEIXIN

				let mainPic = await poster.getImage(this.info.img);
				// #endif
				// #ifdef H5
				// h5 需要将前缀 改成 https://h5.zhaimei365.com
				let mainPic = await poster.getImage(this.info.img);
				// #endif
				let qrcode = this.info.wxQrcodeUrl;
				// #ifdef MP-WEIXIN
				await poster.removeSavedFile();
				// #endif
				try {
					if (mainPic && qrcode) {
						const imgs = {
							mainPic: mainPic,
							qrcode: qrcode,
						};
						console.log("准备绘制方法");
						poster.drawGoodsPoster(
							"posterId",
							this.winWidth,
							this.winHeight,
							imgs,
							this.info.name,
							this.info.price,
							this.info.specName,
							(res) => {
								uni.hideLoading();
								if (res) {
									this.posterImg = res;
									console.log("-----", res);
									setTimeout(() => {
										this.isCreated = false;
									}, 60);
								} else {
									this.$refs.uToast.show({
										title: "生成海报失败,请稍后再试",
									});
								}
							}
						);
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: "生成海报图片下载失败,请稍后再试",
						});
					}
				} catch (e) {
					console.log("Ceuo");
				}
			},
			getInfo() {
				platformGoodInfo({
					platformGoodsId: this.goodsId,
					busType:this.busType||'',
					cityId: this.LOCATION.areaId && this.LOCATION.areaId.toString().substring(0, 4) + '00' || ''
				}).then((res) => {
					if (res.code === 200) {
						res.data.platformGoodsSpecMix.forEach((mix) => {
							let info = this.goodsCarList.find(
								(_e) => _e.platformGoodsSpecMixId === mix.platformGoodsSpecMixId
							);
							if (info) {
								this.$set(mix, "purNum", info.purNum);
								this.$set(mix, "checkFlag", true);
							} else {
								this.$set(mix, "purNum", 0);
								this.$set(mix, "checkFlag", true);
							}
						})
						this.goodsInfo = res.data
						shareImg = this.goodsInfo.images && this.goodsInfo.images
							.split(',')[0];
						console.log(shareImg, 'shareImg')
						shareTitle = this.goodsInfo.customGoodsName
						this.goodsInfo.shopPrice = res.data.priceRange
						
						this.list = this.goodsInfo.images && this.goodsInfo
							.images
							.split(',') || []
						this.goodsImg = this.goodsInfo.platformGoodsInfo
						this.goodsInfo.promise = this.goodsInfo.promise ? this.goodsInfo.promise.split(',') : ''
						this.detailVideo = this.goodsInfo.video
						if (this.source == 'theme') {
							let arr = []
							this.goodsInfo.platformGoodsSpecMix.forEach((item, index) => {
								item.purNum = 1
								if (this.platformGoodsSpecMixId == item.platformGoodsSpecMixId) {
									let obj = item
									arr.push(obj)
								}
							})
							this.goodsInfo.platformGoodsSpecMix = arr
							console.log(this.goodsInfo.platformGoodsSpecMix);
						}
						if (this.detailVideo) this.currenIndex = 'video'
						let info = this.goodsCarList.find(_e => _e.platformGoodsSpecMixId === this.goodsInfo
							.platformGoodsSpecMixId)
						// if (this.goodsInfo.startTime ) {
							this.goodsInfo.end =this.$common.calcTime(this.goodsInfo.startTime,this.goodsInfo.endTime)
							console.log(this.goodsInfo.end,'是否范围内');
							this.stockTheme = !this.goodsInfo.end && (this.goodsInfo.platformGoodsSpecMix[0].stock<=0) ? 0 : 1 //如果没有库存的且报价时间已失效---价格处显示：带报价，底部按钮显示下预约单流程
						// }
						this.loading = false

					} else {
						this.$u.toast(res.msg);
					}
				});
			},
		},
	};
</script>
<style lang="scss">
	.detail-img {
		/deep/ image {
			display: block !important;
		}
	}
</style>
<style lang="scss" scoped>
	.label-other {
		padding: 2rpx 10rpx;
		background: #48a147;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		color: white;
		font-size: 24rpx;
	}

	.small-img {
		margin-left: 15rpx;
		margin-top: 15rpx;

		&:nth-child(3n-2) {
			margin-left: 0;
		}
	}

	.sc-code {
		position: fixed !important;
		left: 10000rpx;
		top: 10000rpx;
		z-index: -1;
		opacity: 0;
	}

	.tui-poster__canvas {
		background-color: #fff;
		position: absolute;
		left: -9999px;
		top: -9999px;
		z-index: -1;
	}

	.box {
		border-radius: 20rpx;
		margin: 20rpx 30rpx;
		background-color: white;
		font-size: 24rpx;
		font-family: PingFangSC-Regular-, PingFangSC-Regular;
		font-weight: normal;

		.desc {
			color: #666666;
		}

		.value {
			color: #333333;
		}

		.title {
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;

			.title-icon {
				width: 6rpx;
				height: 30rpx;
				background: #ffcc09;
				border-radius: 3rpx 3rpx 3rpx 3rpx;
			}
		}
	}

	.block {
		position: absolute;
		width: 750rpx;
		height: 620rpx;
		background-color: rgba($color: #000000, $alpha: 0.3);
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.sanjia {
			width: 0;
			height: 0;
			border-top: 12px solid transparent;
			border-left: 17px solid #ffffff;
			border-bottom: 12px solid transparent;
		}
	}

	.detail {
		height: 570rpx;

		.block {
			position: absolute;
			width: 690rpx;
			height: 570rpx;
			background-color: rgba($color: #000000, $alpha: 0.3);
			left: 0;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.sanjia {
				width: 0;
				height: 0;
				border-top: 12px solid transparent;
				border-left: 17px solid #ffffff;
				border-bottom: 12px solid transparent;
			}
		}
	}

	.count-down-box {
		height: 68rpx;
		padding: 18rpx 45rpx;
		background: #ef2929;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		display: inline-block;
		color: #ffffff;
		margin: 0 auto;
	}

	.count-down-container {
		text-align: center;
		width: 100%;
		bottom: 50rpx;
	}

	.label-like {
		width: 267rpx;
		height: 43rpx;
		margin-left: 242rpx;
	}

	.desc-text-box {
		white-space: pre-wrap;
		padding: 15rpx;
		margin: 12rpx;
		border-radius: 10rpx;
		color: #333333;
		border: 5rpx dashed #47A848;
	}
</style>